<template>
  <section>
    <!--工具条-->

    <el-row :gutter="20" v-show="false">
      <el-col :lg="8" :md="24">
        <div class="grid-content bg-purple clearfix"> 
          <div class="dev-title">设备在线数统计</div>

          <!-- <el-select
            v-if="usertype!=0"
            v-model="scade"
            filterable
            placeholder="请选择子用户"
            size="mini"
            @change="select_scade()"
            class="dev-select"
          >
            <el-option key="0" label="当前账户" value="0"></el-option>
            <el-option
              v-for="item in userclist"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select> -->
          <el-select
            v-if="usertype==2"
            v-model="scade1"
            filterable
            placeholder="所有账号显示"
            size="mini"
            @change="select_scade1()"
            class="dev-select"
          >
            <el-option key label="全选" value=" "></el-option>
            <el-option
              v-for="item in firmlist"
              :key="item.companyId"
              :label="item.name"
              :value="item.companyId"
            ></el-option>
          </el-select>
        </div>
        <div class="col-bg clearfix" style="overflow: initial">
          <div id="vertical" :span="24" style="width:50%; height:210px; float: left;"></div>
          <div class="device_item">
            <div class="device_item_list">
              在线
              <span class="online">{{linecount.onlineCount}}</span>
            </div>
            <div class="device_item_list">
              离线
              <span>{{ linecount.offlineCount}}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :lg="8" :md="24">
        <div class="grid-content bg-purple">
          <div class="dev-title">告警设备数统计</div>
          <!-- <el-select v-model="device_id" placeholder="请选择" size="mini" class="dev-select">
                        <el-option v-for="item in users" :key="item.deviceId" :label="item.name" :value="item.deviceId">
                        </el-option>
          </el-select>-->
        </div>

        <div class="col-bg clearfix" style="overflow: initial">
          <div id="vertical1" :span="24" style="width:50%; height:210px;float: left;"></div>
          <div class="device_item">
            <div class="device_item_list">
              误报
              <span class="online">{{alarm_count.distort}}</span>
            </div>
            <div class="device_item_list">
              未处理
              <span>{{ alarm_count.noProcess}}</span>
            </div>
            <div class="device_item_list">
              已处理
              <span class="red">{{ alarm_count.prcessed}}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :lg="8" :md="24">
        <div class="grid-content bg-purple">
          <div class="dev-title">所属组织</div>
        </div>

        <div class="col-bg clearfix" style="height: 210px;">
          <el-col :span="24" style="padding-top:10px">
            <el-col v-for="item in userclist1" class="userlist" :span="8">
              <div
                style=" width:100px;
                            word-break:keep-all;
                            white-space:nowrap;
                            overflow:hidden;
                            text-overflow:ellipsis; "
              >{{item.name}}</div>
              <span style="color:#f60">{{item.count}}</span>
            </el-col>
          </el-col>
          <el-pagination
            layout="prev, pager, next"
            @current-change="handleCurrentChange1"
            :page-size="9"
            :total="total1"
            style="float: left;"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    
    <div class="section-content pb-top clearfix">
      <el-col :span="24" class="toolbar">
        <el-form :inline="true" :model="filters" @submit.native.prevent>
          <el-form-item>
            <el-button  @click="ordinaryselect()" :class="selectAll==true? 'selectactive':''">普通查询</el-button>
          </el-form-item>  
          <!-- <el-form-item >
            <el-button  @click="selecttypeput()" :class="selectType==true? 'selectactive':''">设备类型属性查询</el-button>
          </el-form-item>          -->
          <!-- <el-form-item>
              <el-button v-on:click="selectgroup()" :class="selectGroups==true? 'selectactive':''">分组查询</el-button>
            </el-form-item> -->
            <el-radio-group v-model="radio1" class="fr">
            <el-radio-button label="列表形式"></el-radio-button>
            <el-radio-button label="地图形式"></el-radio-button>
          </el-radio-group>
          <div v-if="selectAll">
            <el-form-item>
              <el-input style="width:100%;" v-model="filters.name" placeholder="设备名称" @keyup.enter.native="getUsers2()"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                style="width:100%;"
                v-model="filters.deviceSn"
                placeholder="网关SN"
                @keyup.enter.native="getUsers2()"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width:100%;"
                v-model="filters.deviceTypeId"
                filterable
                placeholder="设备类型"
                @change="getUsers2()"
              >
                <el-option label="全选" value=" "></el-option>
                <el-option
                  v-for="item in typelist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item>
              <el-select style="width:100%;" v-model="filters.deviceModelId" placeholder="网关型号" @change="getUsers2()">
                <el-option key label="全选" value=" "></el-option>
                <el-option
                  v-for="item in modellist"
                  :key="item.modelId"
                  :label="item.name"
                  :value="item.modelId"
                ></el-option>
              </el-select>
            </el-form-item> -->
      <el-form-item>
              <el-select style="width:100%;" v-model="filters.formula"  placeholder="设备模板" @change="getUsers2()">
                <el-option key=" " label="全选" value=" "></el-option>
                <el-option v-for="item in formulalist" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width:100%;"
                v-if="usertype!=0"
                v-model="scade1s"
                filterable
                placeholder="请选择组织"
                @change="scade1get()"
              >
                <el-option label="全选" value=" "></el-option>
                <el-option
                  v-for="item in firmlist"
                  :key="item.companyId"
                  :label="item.name"
                  :value="item.companyId"
                ></el-option>
              </el-select>
            </el-form-item>
     
            <!-- <el-form-item>
              <el-select
                v-model="scades"
                filterable
                placeholder="请选择子用户"
                size="mini"
                @change="getUsers2()"
              >
                <el-option :key="userID" label="全选" value=" "></el-option>
                <el-option
                  v-for="item in userclist"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item> -->         
            <!-- <el-form-item>
              <el-select style="width:100%;" v-model="filters.terminalUser" placeholder="终端用户" @change="getUsers2()">
                <el-option key=" " label="全选" value=" "></el-option>
                <el-option v-for="item in terminal_list" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
               <el-form-item>
              <el-select v-model="deviceGroupId" @change="groupChange" placeholder="设备分组">
                <el-option v-for="item in groupLists" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item>
              <el-button :type="buttonColor" v-on:click="groupChange()">分组查询</el-button>
            </el-form-item> -->

            <el-form-item>
                 <el-button v-show="selfshow" @click="showfilter">显示更多...</el-button> 
            </el-form-item>
            <el-form-item>
            <el-button :type="buttonColor" v-on:click="getUsers2">查询</el-button>
          </el-form-item>
          <el-form-item v-if="menubt.indexOf('/devices/add')>-1">
            <el-button :type="buttonColor" @click="handleAdd">新增</el-button>
          </el-form-item>
            <div v-show="showMore">
      
            <el-form-item>
              <el-select style="width:100%;" v-model="area" placeholder="省" @change="addresslist(index)">
                <el-option label="全选" key value="全选"></el-option>
                <el-option
                  v-for="(item,index) in cityData"
                  v-if="item.text!='海外'"
                  :key="item.text"
                  :label="item.text"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select style="width:100%;" v-model="address" placeholder="市" @change="getUsers2()">
                <el-option label="全选" value="全选"></el-option>
                <el-option
                  v-for="item in cityDatas"
                  :key="item.text"
                  :label="item.text"
                  :value="item.text"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
                 <el-button v-show="hiddenMore"  @click="hideMore">收起</el-button> 
            </el-form-item>
          </div>
          </div>
          <!-- <el-form-item>
                        <el-button :type="buttonColor" @click="handleAdd">导出设备</el-button>
          </el-form-item>-->
          <div v-if="selectType">
            <el-form-item>
              <el-select
                v-model="attr.deviceTypeId"
                filterable
                placeholder="请选择设备类型"
                @change="typechlget()"
              >
                <el-option
                  v-for="item in typelist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="attr.attrId" placeholder="请选择设备属性">
                <el-option
                  v-for="item in typechllist"
                  :key="item.attrId"
                  :label="item.attrRemark"
                  :value="item.attrId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="attr.attrValue"
                filterable
                placeholder="请输入属性值"
                @keyup.enter.native="getUsers2()"
              ></el-input>
            </el-form-item>
          </div>
          <div v-if="selectGroups">
            <el-form-item>
              <!-- <el-select v-model="deviceGroupId" @change="groupChange" placeholder="设备分组"> -->
              <el-select v-model="deviceGroupName" @change="groupChange" placeholder="设备分组">
                <!-- <el-option v-for="item in groupLists" :label="item.name" :value="item.id"></el-option> -->
                <el-option disabled label='请选择分组' value=' '></el-option>
                <el-tree
                    @node-click="getlists"
                    :data="groupList"
                    :props="defaultProps"
                    node-key="id"
                    default-expand-all
                    :expand-on-click-node="false"
                    ></el-tree>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="filters.filtergroupname" filterable placeholder="设备名称" @keyup.enter.native="groupChange()"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="filters.filterdeviceSn" filterable placeholder="网关SN" @keyup.enter.native="groupChange()"></el-input>
            </el-form-item>
          </div>
          <!-- <el-form-item>
            <el-button :type="buttonColor" v-on:click="getUsers2">查询</el-button>
          </el-form-item>
          <el-form-item v-if="menubt.indexOf('/devices/add')>-1">
            <el-button :type="buttonColor" @click="handleAdd">新增</el-button>
          </el-form-item> -->
        </el-form>
        
    <!-- <el-radio-group v-model="radio1">
      <el-radio-button label="列表形式"></el-radio-button>
      <el-radio-button label="地图形式"></el-radio-button>
    </el-radio-group> -->
      </el-col>

      <!--列表-->
      <el-table v-show="radio1=='列表形式'"
        :data="users"
        class="alarmshistory"
        highlight-current-row
        v-loading="listLoading"
        @selection-change="selsChange"
        :header-row-style="{backgroundColor: titleColor}"
        style="width: 100%;"
      >
        <el-table-column align="center" type="selection" width="30"></el-table-column>
        <el-table-column label="序号" width="80" align="center" type="index" :index="indexMethod"></el-table-column>
        <!-- <el-table-column prop="state" label="状态" align="center" width="80" :formatter="formatstate"> -->
        <el-table-column label="设备名称" width="200" align="center">
          <template scope="scope">
            <span class="pb-name" @click="details(scope.$index, scope.row)">
              <i class="pb-icon icon-map"></i>
              {{scope.row.name}}
            </span>
          </template>
        </el-table-column>
         <!-- <el-table-column prop="addr" label="采集频率">
        </el-table-column> -->
        <!-- <el-table-column align="center" prop="barCode"  label="整机条码" ></el-table-column> -->
        <el-table-column align="center"  label="网关SN" width="200">
              <template scope="scope">
            <span class="pb-name" @click="qrget(scope.row)">
                <div style="color:#0099cc;font-size:16px">二维码</div>
              {{scope.row.deviceSn}}
            </span>
          </template>
        </el-table-column>
        
        <!-- <el-table-column prop="deviceModelName" label="网关型号">
        </el-table-column>-->
        <!-- <el-table-column prop="deviceGroupName" label="所属分组">
        </el-table-column>-->
        <el-table-column align="center" prop="deviceTypeName" label="设备类型">
          <template scope="scope">
            <el-popover id="prpo" placement="right" width="300" trigger="click" popper-class="attributes">
              <el-table :data="gridData">
                <el-table-column width="150" property="attrRemark" label="属性"></el-table-column>
                <el-table-column width="150" property="name" label="属性值">
                  <template scope="scope1">
                    <el-input v-model="scope1.row.attrValue"></el-input>
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                v-if="menubt.indexOf('/device_type_relation/put')>-1"
                :type="buttonColor"
                @click="typeput(scope.$index, scope.row)"
              >修改属性</el-button>
              <span
                class="pb-name"
                @click="typedis(scope.$index, scope.row)"
                slot="reference"
              >{{scope.row.deviceTypeName}}</span>
            </el-popover>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="addr" label="采集频率">
        </el-table-column>-->

        <el-table-column align="center" prop="deviceModelName" label="型号"></el-table-column>
        <el-table-column align="center" prop="companyName" label="所属经销商"></el-table-column>
        <!-- <el-table-column align="center" prop="deviceUserName" label="所属用户"></el-table-column> -->
        <!-- <el-table-column align="center" prop="terminalUserName" label="终端用户"></el-table-column> -->

        <el-table-column align="center" prop="updateTime" label="更新时间" width="160"></el-table-column>
        <el-table-column v-if="usertype!=0&&menubt.indexOf('/template/app')>-1" align="center" label="绑定列表">
          <template scope="scope">
            <span class="pb-name" @click="bindget(scope.$index, scope.row)">绑定列表</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="告警通知">
          <template scope="scope">
           <el-switch v-model="scope.row.alarmStatus" :active-color="theme" :active-value="1" :inactive-value="0"  @change="alertSwitch(scope.$index, scope.row)"></el-switch>
           </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" align="center" width="80" >
          <template scope="scope">
            <span :style="{color: scope.row.state == 1 ?'#67c23a':'#d3d4d6'}">{{ scope.row.state == 1 ? "在线" : scope.row.state == 0 ? "离线" : "未知" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="激活状态" align="center">
          <template scope="scope">
            <span style="color:#e6a23c;">未激活</span> 
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template scope="scope">
            <i
              v-if="scope.row.favoriteStatus==1"
              @click="collectdel(scope.$index, scope.row)"
              class="pb-icon icon-callattention"
              circle
              title="取消关注"
            ></i>
            <i
              title="关注"
              v-else
              @click="collect(scope.$index, scope.row)"
              type="warning"
              icon="el-icon-star-off"
              class="pb-icon icon-attention"
            ></i>
            <i
              v-if="menubt.indexOf('/device/put')>-1"
              @click="handleEdit(scope.$index, scope.row)"
              title="编辑"
              icon="el-icon-edit"
              circle
              class="pb-icon icon-edit"
            ></i>
            <i
              v-if="menubt.indexOf('/device/delete')>-1"
              @click="handleDel(scope.$index, scope.row)"
              icon="el-icon-delete"
              circle
              title="删除"
              class="pb-icon icon-delete"
            ></i>
          </template>
        </el-table-column>
      </el-table>
      <!--工具条-->
      <el-col v-show="radio1=='列表形式'" :span="24" class="toolbar"> 
        <!-- <el-button v-if="menubt.indexOf('/device/delete')>-1" type="danger" @click="batchRemove"
        :disabled="this.sels.length===0">批量删除</el-button>-->
        <!-- <el-button
          v-if="menubt.indexOf('/device/put')>-1"
          type="danger"
          @click="batchType"
          :disabled="this.sels.length===0"
        >批量修改设备类型</el-button>
        <el-button
          v-if="menubt.indexOf('/device/put')>-1"
          type="danger"
          @click="batchUser"
          :disabled="this.sels.length===0"
        >批量修改终端用户</el-button>
        <el-button
         
          type="danger"
          @click="alarmVisible=true"
          :disabled="this.sels.length===0"
        >批量修改告警开关</el-button> -->

        <el-pagination
          layout="sizes,prev, pager, next"
          @current-change="handleCurrentChange"
           :current-page.sync="page"
          @size-change="handleSizeChange"
          :page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          style="float:right;"
          v-if="reflushPageFlag"
        ></el-pagination>
      </el-col>
    </div>
    <div v-show="radio1!='列表形式'" class="grid-content bg-purple">
      <div class="dev-title">设备地图</div>
    </div>
    <div v-show="radio1!='列表形式'" id="allmap" ref="allmap"></div>
    <!-- 二维码 -->
        <el-dialog
        title="二维码"
        v-show="initVisible"
        v-model="initVisible"
        :custom-class="dialogTitleColor"
        @close="initVisible=false"
      >
        <div slot="footer" style="text-align: center; ">
          <qriously v-model="initQCode" :size="150" />
        </div>
      </el-dialog>
    <!--编辑界面-->
        <el-dialog
      title="编辑"
      v-show="alarmVisible"
      v-model="alarmVisible"
      :custom-class="dialogTitleColor"
      @close="alarmVisible=false"
    >
      <div slot="footer" style="text-align: left; ">
        <el-form
          @submit.native.prevent
          :model="editForm"
          label-width="120px"
          :rules="editFormRules"
          ref="editForm"
        >
         
          <el-form-item label="批量告警状态">
            <el-select v-model="alarmbool" placeholder="批量告警状态">
              <el-option  label="关" value="0"></el-option>
              <el-option  label="开" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center;">
          <el-button @click.native="alarmVisible = false">取消</el-button>
          <el-button :type="buttonColor" @click.native="alarmSubmit" :loading="editLoading">提交</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑"
      v-show="editFormVisible"
      v-model="editFormVisible"
      :custom-class="dialogTitleColor"
      @close="editFormVisible=false"
    >
      <div slot="footer" style="text-align: left; ">
        <el-form
          @submit.native.prevent
          :model="editForm"
          label-width="120px"
          :rules="editFormRules"
          ref="editForm"
        >
          <!-- <el-form-item label="类型名称" prop="name">
                        <el-input v-model="editForm.name" auto-complete="off"></el-input>
          </el-form-item>-->
          <el-form-item label="设备类型">
            <el-select v-model="editForm.deviceTypeId" filterable placeholder="设备类型">
              <el-option
                v-for="item in typelist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center;">
          <el-button @click.native="editFormVisible = false">取消</el-button>
          <el-button :type="buttonColor" @click.native="typeSubmit" :loading="editLoading">提交</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑"
      v-show="userFormVisible"
      v-model="userFormVisible"
      :custom-class="dialogTitleColor"
      @close="userFormVisible=false"
    >
      <div slot="footer" style="text-align: left; ">
        <el-form
          @submit.native.prevent
          :model="editForm"
          label-width="120px"
          :rules="editFormRules"
          ref="editForm"
        >
         
          <!-- <el-form-item label="终端用户">
            <el-select v-model="editForm.terminalUser" placeholder="终端用户">
              <el-option v-for="item in terminal_list" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center;">
          <el-button @click.native="userFormVisible = false">取消</el-button>
          <el-button :type="buttonColor" @click.native="userSubmit" :loading="editLoading">提交</el-button>
        </div>
      </div>
    </el-dialog>
    <!--新增界面-->
    <el-dialog
      title="删除"
      v-show="addFormVisible"
      v-model="addFormVisible"
      :custom-class="dialogTitleColor"
      @close="addFormVisible=false"
    >
      <div slot="footer" style="text-align: left; ">
        <el-form
          @submit.native.prevent
          :model="addForm"
          label-width="100px"
          :rules="addFormRules"
          ref="addForm"
        >
          <el-form-item label="验证码">
            <el-input v-model="codes" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right;">
          <el-button type="success" @click.native="codeadd">获取验证码</el-button>
          <el-button @click.native="addFormVisible = false">取消</el-button>
          <el-button :type="buttonColor" @click.native="deviceDel" :loading="addLoading">提交</el-button>
        </div>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import echarts from "echarts";
import util from "../../common/js/util";
//import NProgress from 'nprogress'
import {
  device_delete,
  device_query,
  device_favorites_add,
  device_favorites_cancel,
  addUser,
  user_query,
  device_get_user_count,
  device_get_query_user_count,
  alarm_log_count,
  device_model_query,
  device_type_query,
  dict_query,
  device_type_relation_get,
  device_type_relation_put,
  device_type_relation_queryDevice,
  device_type_get,
  terminal_user_query,
  order_query,
  device_send_auth_code,
  device_update_device_type,
  device_update_ternimal_user,
  device_device_alarm,
  user_querycompany,
  device_device_alarm_list,
  device_template_query,
  device_group_query,
  device_company_group_query
} from "../../api/api";

export default {
  data() {
    return {
      reflushPageFlag: true,//视图刷新
      defaultProps: {
                    children: "childrens",
                    label: "name"
                },//树形控件配置
      alarmVisible:false,
      showMore:false,
      selfshow:true,
      hiddenMore:false,
      selectAll:true,
      selectGroups:false,//分组选择
      alarmbool:'0',
      formulalist:[],
      radio1:'列表形式',//模式选择
      initVisible:false,//二维码显示
      initQCode: "",
      userFormVisible: false,
      queryCompanyId: JSON.parse(sessionStorage.getItem("user")).companyId,
      scade1s: "",
      scades: "",
      scade1: "",
      usertype: "",
      userID: "0",
      pageSize: 10,
      codes: "",
      order_list: "",
      terminal_list: "",
      typechllist: "",
      selectType: false,
      gridData: "",
      typelist: "",
      modellist: "",
      device_id: "",
      userclist1: "",
      scade: "",
      userclist: "",
      chartColumn: null,
      vertical: null,
      vertical1: null,
      attr: {
        deviceTypeId: "",
        attrId: "",
        attrValue: ""
      },
      filters: {
        name: "",
        deviceTypeId: null,
        deviceSn: null,
        deviceModelId: null,
        terminalUser: "",
        guild: "",
        area: "",
        area1: "",
        address: "",
        orderSn: "",
        formula:"",
        filtergroupname:"",
        filterdeviceSn:""
      },
      area: "",
      address: "",
      users: [],
      total: 0,
      total1: 0,
      page1: 1,
      page: 1,
      listLoading: false,
      sels: [], //列表选中列

      editFormVisible: false, //编辑界面是否显示
      editLoading: false,
      editFormRules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ]
      },
      linecount: {},
      //编辑界面数据
      editForm: {
        id: 0,
        name: "",
        sex: -1,
        age: 0,
        birth: "",
        addr: ""
      },

      addFormVisible: false, //新增界面是否显示
      addLoading: false,
      addFormRules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ]
      },
      //新增界面数据
      addForm: {
        name: "",
        sex: -1,
        age: 0,
        birth: "",
        addr: ""
      },
      alarm_count: "",
      industry: "",
      user_t: "",
      region:"",
      cityData: "",
      cityDatas: "",
      firmlist: "",
      dellist: [],
      deviceGroupId:'',
      groupList:[]
    };
  },
  computed:{
    buttonColor(){
      return this.$store.state.buttonColor
    },
    theme() {
      return this.$store.state.theme
    },
    titleColor(){
      return this.$store.state.titleColor
    },
    dialogTitleColor(){
      return this.$store.state.dialogTitleColor
    }
  },
  methods: {
    //设备分组筛选
       groupChange(e) {
      console.log(this.deviceGroupId)
      let para = {
        deviceGroupId: this.deviceGroupId,
        name:this.filters.filtergroupname,
        deviceSn:this.filters.filterdeviceSn,
        pageNo: 1,
        pageSize: 1000
      };
      this.listLoading = true;
      //NProgress.start();
      device_company_group_query(para).then(res => {
        this.begCode(res.code, res.message);
        this.users = res.data.list;
        this.page = res.data.pageNo;
        this.total = res.data.totalCount
        this.map()
        this.listLoading = false;
        //NProgress.done();
      });
    },
    getlists(s, d, t){
            console.log(s)
            this.deviceGroupName = s.name
            this.deviceGroupId = s.id
            this.groupChange()
        },
      getGroup() {
        console.log(this.page)
      let para = {
        pageNo: this.page,
        pageSize: 1000
      };
      this.listLoading = true;
      //NProgress.start();
      device_group_query(para).then(res => {
        this.begCode(res.code);
        // this.total = res.data.totalCount;
        this.groupList = res.data;

        this.groupLists = [{ id: 0, name: "默认" }];
        this.getrecursion(res.data);
        this.listLoading = false;
        //NProgress.done();
      });
    },
    selectgroup(){
      this.selectGroups = true
      this.selectType = false
      this.selectAll = false
    },
    getrecursion(data) {
      for (var i in data) {
        this.groupLists.push(data[i]);
        OUT:
        if (!data[i].childrens) {
          break OUT;
        } else {
          this.getrecursion(data[i].childrens);
        }
      }
      // console.log(this.querys)
    },
      qrget(s) {
      this.initVisible = true;
      this.initQCode = s.deviceSn + " " + s.password;
    },
    getUsers2() {
      this.page = 1;
      this.total = 0;
      this.getUsers();
    },
    scade1get() {
      let para = {
        pageNo: 1,
        pageSize: 9999,
        type: 0,
        companyId: this.scade1s,
        authType: 0
      };
      // if (this.scade1) {
      //     // this.queryCompanyId=

      //     let obj = '';
      //     console.log(this.scade1)
      //     obj = this.firmlist.find((item) => {
      //         console.log(item.companyId)
      //         return item.companyId === this.scade1;
      //     });
      //     console.log(obj)
      //     this.queryCompanyId = obj.companyId;
      // } else {
      //     this.queryCompanyId = JSON.parse(sessionStorage.getItem('user')).companyId
      // }
      user_query(para).then(res => {
        this.begCode(res.code, res.message);
        this.userclist = res.data.list;
        console.log(this.scade1);
        // if (this.scade1) {
        //     this.userID = this.scade1;
        //     this.scade = "";
        // } else {
        //     this.userID = 0;
        //     console.log(this.userID)
        // }
      });
    },
    bindget(index, row) {
      sessionStorage.setItem("facility_details", row.deviceId);
      this.$router.push({
        path: "/devices/bindlist"
      });
    },
    handleSizeChange(val) {
      console.log(val)
      this.pageSize = val;
      // if(this.deviceGroupId && this.deviceGroupId!=0){
      //   this.groupChange()
      // }else{
        this.getUsers();
      // }
    },
    indexMethod(index) {
      let num = (this.page - 1) * this.pageSize + index + 1;
      return num;
    },
    typechlget() {
      this.attr.attrId = "";
      let para = {
        id: this.attr.deviceTypeId
      };

      //NProgress.start();
      device_type_get(para).then(res => {
        this.begCode(res.code, res.message);
        this.typechllist = res.data.deviceTypeAttrList;
        // this.getUsers()
        // this.linecount = res.data
        //NProgress.done();
        // this.drawvertical();
      });
    },
    ordinaryselect(){
      this.selectAll = true;
      this.selectGroups = false;
      this.selectType = false;
    },
    selecttypeput() {
      this.selectType = true;
      this.selectGroups = false;
      this.selectAll = false;
    },
    typedis(index, row) {
      if (this.menubt.indexOf("/device_type_relation/get") == -1) {
        this.$message({
          message: "您没有修改设备类型的的权限",
          type: "warning"
        });
        return false;
      }
      let para = {
        deviceId: row.deviceId,
        deviceTypeId: row.deviceTypeId
      };
      //NProgress.start();
      device_type_relation_get(para).then(res => {
        this.begCode(res.code, res.message);
        this.gridData = res.data.list;
      });
    },
    typeput(index, row) {
      let para = {
        deviceId: row.deviceId,
        deviceTypeId: row.deviceTypeId,
        deviceTypeRelationList: this.gridData
      };
      //NProgress.start();
      device_type_relation_put(para).then(res => {
        this.begCode(res.code, res.message);
        this.$message({
          message: "修改属性成功",
          type: "success"
        });
        document.querySelector("#prpo").click();
        // this.linecount = res.data
        //NProgress.done();
        // this.drawvertical();
      });
    },
    det_deviceTypeName() {},
    provincelist(){
      console.log(this.region);
      console.log(this.filters.area1);
      if (this.filters.area1 == "全选") {
        console.log(this.area);
        this.cityData = "";
        this.cityDatas = "全选";
        this.address = "";
        this.area = "";
        this.getUsers();
        return false;
      }
      this.cityDatas = "";
      this.address = "";
      this.area = "";
      this.cityData = this.region[this.filters.area1].province
      console.log(this.cityData);
      this.getUsers()
    },
    addresslist(s) {
      console.log(this.area);
      if (this.area == "全选") {
        console.log(this.area);
        this.cityDatas = "";
        this.getUsers();
        return false;
      }
      this.address = "";
      this.cityDatas = this.cityData[this.area].children;
      this.getUsers();
    },
    show: function(ev) {
      if (ev.keyCode == 13) {
        alert("你按回车键了");
      }
    },
    handleSave() {
      this.giveGet();
    },
    handleSave2() {
      this.getUsers();
      this.select_scade();
    },
    giveGet() {
      alarm_log_count().then(res => {
        this.begCode(res.code, res.message);
        this.alarm_count = res.data;

        this.drawvertical1();
      });
    },
    select_scade1(s) {
      // let para = {
      //   pageNo: 1,
      //   pageSize: 9999,
      //   type: 0,
      //   companyId: this.scade1
      // };
      // console.log(this.scade1);
      // if (this.scade1) {
      //   // this.queryCompanyId=

      //   let obj = "";
      //   console.log(this.scade1);
      //   obj = this.firmlist.find(item => {
      //     console.log(item.companyId);
      //     return item.companyId === this.scade1;
      //   });
      //   console.log(obj);
      //   this.queryCompanyId = obj.companyId;
      // } else {
      //   this.queryCompanyId = JSON.parse(
      //     sessionStorage.getItem("user")
      //   ).companyId;
      // }
       let para = {
        queryUserId: this.scade,
        queryCompanyId: this.scade1
      };
      //NProgress.start();
      device_get_user_count(para).then(res => {
        this.begCode(res.code, res.message);
        this.linecount = res.data;
        //NProgress.done();
        this.drawvertical();
      });
      // user_query(para).then(res => {
      //   this.begCode(res.code, res.message);
      //   this.userclist = res.data.list;
      //   console.log(this.scade1);
      //   if (this.scade1) {
      //     this.userID = this.scade1;
      //     this.scade = "";
      //   } else {
      //     this.userID = 0;
      //     console.log(this.userID);
      //   }
      // });
      // this.getUsers()
    },
    select_scade() {
      if (this.usertype == 0) {
        this.scade = JSON.parse(sessionStorage.getItem("user")).userId;
      }
      console.log(this.scade);
      if (JSON.parse(sessionStorage.getItem("user")).authType == 1) {
        this.scade = 0;
      }
      let para = {
        queryUserId: this.scade,
        queryCompanyId: this.queryCompanyId
      };
      //NProgress.start();
      device_get_user_count(para).then(res => {
        this.begCode(res.code, res.message);
        this.linecount = res.data;
        //NProgress.done();
        this.drawvertical();
      });
      // this.getUsers();
    },
    handleNodeClick(d) {},

    map() {
      console.log(this.users)
      let map = new BMap.Map(this.$refs.allmap); // 创建Map实例
      // var convertor = new BMap.Convertor();

      map.enableScrollWheelZoom();
      // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
      map.addControl(
        new BMap.MapTypeControl({
          //添加地图类型控件
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
        })
      );
      // map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
      // map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

      var MAX = this.users.length;
      var markers = [];
      var markerClusterer = null;
      var mapStyle = {
        features: ["road", "building", "water", "land"] //隐藏地图上的"poi",
        // style: "midnight",
      };
      map.setMapStyle(mapStyle);
      // map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
      map.centerAndZoom(new BMap.Point(86.392,48.081), 5);
      map.setCurrentCity("哈巴河县"); // 设置地图显示的城市 此项是必须设置的

      for (let i = 0; i < MAX; i++) {
        if(this.users[i].deviceLocation.longitude!="" && this.users[i].deviceLocation.latitude!=""){
        let pt = new BMap.Point(
          this.users[i].deviceLocation.longitude,
          this.users[i].deviceLocation.latitude
        );
        let s = this.convert(pt);
        let marker = new BMap.Marker(s);
        map.addOverlay(marker);
        let func = () => {};
        markers.push(marker);
        marker.addEventListener("click", () => {
          this.details(1, this.users[i]);
          console.log(this.users[i].deviceId);
        });
        }
      }

      markerClusterer = new BMapLib.MarkerClusterer(map, {
        markers: markers
      });

      markerClusterer.setMaxZoom(16);
    },
    translateCallback(point1) {},
    drawvertical1() {
      this.vertical1 = echarts.init(document.getElementById("vertical1"));
      this.vertical1.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },

        series: [
          {
            name: "告警",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: [
              {
                value: this.alarm_count.prcessed,
                name: "已处理"
              },
              {
                value: this.alarm_count.noProcess,
                name: "未处理"
              },
              {
                value: this.alarm_count.distort,
                name: "误报"
              }
            ]
          }
        ]
      });
    },
    drawvertical() {
      this.vertical = echarts.init(document.getElementById("vertical"));
      this.vertical.setOption({
        // title: {
        //     text: "设备在线数统计"
        // },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: "设备概况",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: this.linecount.onlineCount,
                name: "在线设备"
              },
              {
                value: this.linecount.offlineCount,
                name: "离线设备"
              }
            ]
          }
        ]
      });
    },
    drawColumnChart() {
      this.chartColumn = echarts.init(document.getElementById("chartColumn"));
      this.chartColumn.setOption({
        title: {
          text: "近30天新增设备数"
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    },

    drawCharts() {
      this.drawColumnChart();
    },
    //性别显示转换
    formatSex: function(row, column) {
      return row.sex == 1 ? "男" : row.sex == 0 ? "女" : "未知";
    },
    formatstate(row, column) {
      return row.state == 1 ? "在线" : row.state == 0 ? "离线" : "未知";
    },
    handleCurrentChange1(val) {
      this.page1 = val;
      this.getUsers1();
    },
    handleCurrentChange(val) {
      console.log(val)
      this.page = val;
      // if(this.deviceGroupId && this.deviceGroupId!=0){
      //   this.groupChange()
      // }else{
        this.getUsers();
      // }
      
    },
    getUsers1() {
      console.log(this.page)
      let para = {
        pageNo: this.page1,
        pageSize: 9,
        authType: 0
      };
      device_get_query_user_count(para).then(res => {
        this.begCode(res.code, res.message);
        this.userclist1 = res.data.list;
        this.total1 = res.data.totalCount;
      });
    },
    //获取用户列表
    getUsers() {
      if (this.menubt.indexOf("/device/query") == -1) {
        this.$message({
          message: "您没有查询设备的权限",
          type: "warning"
        });
        return false;
      }
      console.log(this.area)
      console.log(this.cityData[this.area])
      if (this.area == "全选") {
        this.filters.address = "";
      }
      if (this.cityData[this.area]) {
        this.filters.address = this.cityData[this.area].text + this.address;
      }

      if (this.selectAll) {//普通查询
        let para = {
          pageNo: this.page,
          pageSize: this.pageSize,
          name: this.filters.name,
          deviceTypeId: this.filters.deviceTypeId,
          deviceSn: this.filters.deviceSn,
          deviceModelId: this.filters.deviceModelId,
          terminalUser: this.filters.terminalUser,
          guild: this.filters.guild,
          area: this.filters.area1,
          address: this.filters.address,
          orderSn: this.filters.orderSn,
          deviceTemplateId: this.filters.formula,//设备配方
          companyId: this.scade1s,
          deviceUserId: this.scades
        };
        localStorage.setItem("maplist", JSON.stringify(para));
        this.listLoading = true;
        //NProgress.start();
        device_query(para).then(res => {
          this.begCode(res.code, res.message);
          this.page = res.data.pageNo;
          this.total = res.data.totalCount;
          this.users = res.data.list;
          this.listLoading = false;
          console.log(this.users)
          this.map();
          //NProgress.done();
        });
      } else if(this.selectGroups){//分组查询
          this.groupChange()
      }
      else{//设备类型属性查询
        if (
          !this.attr.deviceTypeId ||
          !this.attr.attrId ||
          !this.attr.attrValue
        ) {
          console.log(this.attr.deviceTypeId);
          console.log(this.attr.attrId);
          console.log(this.attr.attrValue);
          this.$message({
            message: "请选择类型属性值",
            type: "warning"
          });
          this.users = [];
          this.total = 0;
          this.page = 1;
          return false;
        }
        let para = {
          deviceTypeId: this.attr.deviceTypeId,
          attrId: this.attr.attrId,
          attrValue: this.attr.attrValue,
          pageNo: this.page,
          pageSize: 1000
        };
        this.listLoading = true;
        //NProgress.start();
        device_type_relation_queryDevice(para).then(res => {
          this.begCode(res.code, res.message);
          this.total = res.data.totalCount;
          this.users = res.data.list;
          this.listLoading = false;

          this.map();
          //NProgress.done();
        });
      }
    }, //前往详情页
    details: function(index, row) {
      sessionStorage.setItem("facility_details", row.deviceId);
      localStorage.setItem("facility_details", row.deviceId);
      this.$router.push({
        path: "/devices/deviceDatail"
      });
    },
    //取消关注
    collectdel: function(index, row) {
      let para = {
        deviceIdList: [row.deviceId]
      };
      device_favorites_cancel(para).then(res => {
        this.begCode(res.code, res.message);
        if (res.code == 0) {
          this.$message({
            message: "取消设备关注成功",
            type: "success"
          });
          this.getUsers();
        }
        this.listLoading = false;
        //NProgress.done();
      });
    },
    //关注
    collect: function(index, row) {
      console.log(row)
      let para = {
        deviceId: row.deviceId
      };
      device_favorites_add(para).then(res => {
        this.begCode(res.code, res.message);
        if (res.code == 0) {
          this.$message({
            message: "关注设备成功",
            type: "success"
          });
          this.getUsers();
        }
        this.listLoading = false;
      });
    },
    handleDel: function(index, row) {
      this.addFormVisible = true;
      this.dellist = [];
      this.dellist.push(row.deviceId);
      console.log(this.dellist);
      sessionStorage.setItem("facility_details", row.deviceId);
      return false;
    },
    codeadd() {
      console.log(this.dellist);
      let para = {
        deviceId: this.dellist[0]
      };
      device_send_auth_code(para).then(res => {
        this.begCode(res.code, res.message);
        //NProgress.done();
        if (res.code == 0) {
          this.$message({
            message: "发送成功,请耐心等待",
            type: "success"
          });
        }
      });
    },
    deviceDel: function(index, row) {
      this.$confirm("确认删除该设备吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          // this.listLoading = true;
          //NProgress.start();
          let para = {
            idList: this.dellist,
            verificationCode: this.codes
          };
          device_delete(para).then(res => {
            this.begCode(res.code, res.message);
            this.listLoading = false;
            //NProgress.done();
            if (res.code == 0) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.getUsers();
              this.addFormVisible = false;
            }
          });
        })
        .catch(() => {});
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      sessionStorage.setItem("deviceId", row.deviceId);

      this.$router.push({
        path: "/devices/edit"
      });
      return false;

      this.editForm = Object.assign({}, row);
    },
    //显示新增界面
    handleAdd: function() {
      this.$router.push({
        path: "/devices/adds"
      });
      // this.addFormVisible = true;
    },
    //编辑
    editSubmit: function() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            //NProgress.start();
            let para = Object.assign({}, this.editForm);
            para.birth =
              !para.birth || para.birth == ""
                ? ""
                : util.formatDate.format(new Date(para.birth), "yyyy-MM-dd");
            editUser(para).then(res => {
              this.begCode(res.code, res.message);
              this.editLoading = false;
              //NProgress.done();
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.$refs["editForm"].resetFields();
              this.editFormVisible = false;
              this.getUsers();
            });
          });
        }
      });
    },
    //新增
    addSubmit: function(row) {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.$confirm("确认删除该设备吗?", "提示", {
              type: "warning"
            })
              .then(() => {
                this.listLoading = true;
                //NProgress.start();
                let para = {
                  idList: [row.deviceId]
                };
                device_delete(para).then(res => {
                  this.begCode(res.code, res.message);
                  this.listLoading = false;
                  //NProgress.done();
                  this.$message({
                    message: "删除成功",
                    type: "success"
                  });
                  this.getUsers();
                });
              })
              .catch(() => {});
          });
        }
      });
    },

    selsChange: function(sels) {
      this.sels = sels;
    },
    alarmSubmit(){
      var ids = this.sels.map(item => item.deviceId).toString();
      this.dellist = ids.split(",");
    this.$confirm("确认提交吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          // this.listLoading = true;
          //NProgress.start();
          let para = {
            idList: this.dellist,
            value: this.alarmbool
          };
          device_device_alarm_list(para).then(res => {
            this.begCode(res.code, res.message);
            //NProgress.done();
            if (res.code == 0) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.getUsers();
              this.alarmVisible = false;
            }
          });
        })
        .catch(() => {});
    },
    //批量删除
    typeSubmit() {
      console.log(this.dellist);
      console.log(this.editForm.deviceTypeId);
      this.$confirm("确认提交吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          // this.listLoading = true;
          //NProgress.start();
          let para = {
            idList: this.dellist,
            id: this.editForm.deviceTypeId
          };
          device_update_device_type(para).then(res => {
            this.begCode(res.code, res.message);
            //NProgress.done();
            if (res.code == 0) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.getUsers();
              this.editFormVisible = false;
            }
          });
        })
        .catch(() => {});
    },
    userSubmit() {
      console.log(this.dellist);
      console.log(this.editForm.deviceTypeId);
      this.$confirm("确认提交吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          // this.listLoading = true;
          //NProgress.start();
          let para = {
            idList: this.dellist,
            id: this.editForm.terminalUser
          };
          device_update_ternimal_user(para).then(res => {
            this.begCode(res.code, res.message);
            //NProgress.done();
            if (res.code == 0) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.getUsers();
              this.userFormVisible = false;
            }
          });
        })
        .catch(() => {});
    },
    batchUser() {
      this.userFormVisible = true;

      this.dellist = [];

      var ids = this.sels.map(item => item.deviceId).toString();
      this.dellist = ids.split(",");
    },
    batchType() {
      this.editFormVisible = true;

      this.dellist = [];

      var ids = this.sels.map(item => item.deviceId).toString();
      this.dellist = ids.split(",");
    },
    batchRemove: function() {
      this.addFormVisible = true;

      this.dellist = [];

      var ids = this.sels.map(item => item.deviceId).toString();
      this.dellist = ids.split(",");
      console.log(ids);
      console.log(this.dellist);
      return false;
      var ids = this.sels.map(item => item.deviceId).toString();
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          //NProgress.start();
          let para = {
            idList: ids.split(",")
          };
          device_delete(para).then(res => {
            this.begCode(res.code, res.message);
            this.listLoading = false;
            //NProgress.done();
            this.$message({ 
              message: "删除成功",
              type: "success"
            });
            this.getUsers();
          });
        })
        .catch(() => {});
    },
    //告警开关
    alertSwitch(index,row){
      console.log(row.alarmStatus);
         let para = {
            alarmStatus: row.alarmStatus,
            deviceId: row.deviceId
          };
          device_device_alarm(para).then(res => {
            this.begCode(res.code, res.message);
            this.listLoading = false;
            //NProgress.done();
            this.$message({ 
              message: "修改成功",
              type: "success"
            });
          });
    },
    showfilter(){
      this.showMore = true
      this.selfshow = false
      this.hiddenMore = true
    },
    hideMore(){
      this.showMore = false
      this.selfshow = true
      this.hiddenMore = false
    },
    refreshPage(){
      this.reflushPageFlag  = false
      this.$nextTick(function(){ 
        this.reflushPageFlag  = true
      })
    }
  },
  mounted() {
    if (
      localStorage.getItem("maplist") &&
      localStorage.getItem("maplist") != ''
    ) {
      let tum = JSON.parse(localStorage.getItem("maplist"));
      console.log(tum);
      this.page = tum.pageNo;
      if (tum.pageSize) {
        this.pageSize = tum.pageSize;
      }
      this.filters.name = tum.name;
      this.filters.deviceTypeId = tum.deviceTypeId;
      this.filters.deviceSn = tum.deviceSn;
      this.filters.deviceModelId = tum.deviceModelId;
      this.filters.terminalUser = tum.terminalUser;
      this.filters.guild = tum.guild;
      // this.filters.address = tum.address;
      this.filters.orderSn = tum.orderSn;
      // this.scade1s = tum.companyId;
      this.scades = tum.deviceUserId;
    }
    // sessionStorage.removeItem('facility_details');
    this.usertype = JSON.parse(sessionStorage.getItem("user")).type;
    
    this.getGroup();
    // console.log(this.usertype);
    this.menubt = localStorage.getItem("menubt");
    this.region = cityData
    // this.cityData = cityData;
    // console.log(this.cityData)
    // console.log(this.region)
    this.getUsers();
    this.refreshPage()
    let para = {
      pageNo: 1,
      pageSize: 9999,
      type: 0,

      authType: 0
    };
    this.industry = JSON.parse(localStorage.getItem("pb_industry"));
    let para1 = {
      name: "industry",
      pageSize: 999,
      pageNo: 1
    };

    let parauser = {
      pageNo: 1,
      pageSize: 9999,
      type: 1
    };
    // user_query(para).then(res => {
    //   this.begCode(res.code, res.message);
    //   this.userclist = res.data.list;
    //   // if (this.userclist[0]) {

    //   //     this.scade = this.userclist[0].userId;
    //   // }
    //   this.scade = this.userID;
    //   this.select_scade();

    //   this.scade1get();
    // });
    // user_query(parauser).then(res => {
    //   this.begCode(res.code, res.message);
    //   this.firmlist = res.data.list;
    // });
    user_querycompany(parauser).then(res => {
      this.begCode(res.code, res.message);
      this.firmlist = res.data.list;
      this.select_scade1();
    });

    this.getUsers1();
    this.t = setInterval(() => {
      this.getUsers1();
    }, 10000);
    device_type_query(para).then(res => {
      this.begCode(res.code, res.message);
      this.typelist = res.data.list;
      //NProgress.done();
    });
    //NProgress.start();
    device_model_query(para).then(res => {
      this.begCode(res.code, res.message);
      this.modellist = res.data.list;
      //NProgress.done();
    });
    let para3 = {
      pageNo: 1,
      pageSize: 9999
    };
    //NProgress.start();
    terminal_user_query(para3).then(res => {
      this.begCode(res.code, res.message);
      this.terminal_list = res.data.list;
      //NProgress.done();
    });
    order_query(para3).then(res => {
      this.begCode(res.code, res.message);
      this.order_list = res.data.list;
      //NProgress.done();
    });
    this.giveGet();
    let _this = this;

    window.onresize = () => {
      return (() => {
        _this.vertical1.resize();
        _this.vertical.resize();
        // _this.drawColumnChart()
      })();
    };
    device_template_query(para3).then((res) => {
                this.formulalist = res.data.list
            })
  },
  destroyed: function() {
    clearInterval(this.t);
  }
};
</script>

<style scoped>
.userlist {
  font-size: 14px;
  line-height: 1.3;
}

#allmap {
  height: 650px;
  overflow: hidden;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple-light {
  background: #e5e9f2;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.dev-select {
  width: 120px;
  float: right;
  margin: 3px;
}

.dev-title {
  display: inline-block;
  line-height: 36px;
  text-indent: 10px;
  color: #fff;
}
.selectactive{
  color:#fff;
  background-color: #409EFF;
}
.section-content{
  padding: 0 20px;
}
.toolbar{
  padding: 10px 0 10px;
}
</style>